<template>
  <el-dialog :visible="showDialog" :close-on-click-modal="false" :title="title" @close="closeDialog">
    <el-form ref="form" label-width="140px" :model="queryData" :rules="rules">
      <el-form-item label="广告位" prop="advimgpos">
        <el-select v-model="queryData.advimgpos" style="width: 500px" @focus="getAdvPosList">
          <el-option v-for="item in advList" :key="item.id" :label="item.advposname" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="广告描述" prop="advimgdesc">
        <el-input v-model="queryData.advimgdesc" style="width: 500px" placeholder="请输入广告描述" />
      </el-form-item>
      <el-form-item label="广告图链接" prop="advimglink">
        <el-input v-model="queryData.advimglink" style="width: 500px" placeholder="请输入广告图链接" />
      </el-form-item>
      <el-form-item label="广告图" prop="advimgsrc">
        <upload-img ref="uploadImg">
          <el-button size="small" type="primary">点击上传</el-button>
        </upload-img>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { getAdvImgAllApi } from '@/api/adv/pos'
import { addAdvImgtApi, getAdvImgDetailApi, editAdvImgApi } from '@/api/adv/img'
export default {
  name: 'AdvimgDialog',
  data() {
    return {
      showDialog: false,
      // 广告位下拉渲染
      advList: [],
      // 请求参数
      queryData: {
        advimgdesc: '',
        advimglink: '',
        advimgpos: '',
        advimgsrc: ''
      },
      // 表单校验
      rules: {
        advimgdesc: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        advimglink: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        advimgpos: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        advimgsrc: [{ required: true, message: '请输入活动名称', trigger: 'change' }]
      }
    }
  },
  computed: {
    title() {
      return this.queryData.id ? '修改广告图' : '新增广告图'
    }
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.showDialog = false
      this.queryData = {
        advimgdesc: '',
        advimglink: '',
        advimgpos: '',
        advimgsrc: ''
      }
      this.$refs.form.resetFields()
    },
    // 获取广告位
    async getAdvPosList() {
      const { data: res } = await getAdvImgAllApi()
      this.advList = res
    },
    // 提交
    async btnOK() {
      // 通过图片上传组件，拿到组件中的fileList中的realtiveUrl
      this.queryData.advimgsrc = this.$refs.uploadImg.fileList[0].realtiveUrl
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return console.log(error)
      }
      // 判断queryData中是否有id，有就是修改，否则就是新增
      if (this.queryData.id) {
        await editAdvImgApi(this.queryData)
        this.$message.success('修改成功')
      } else {
        await addAdvImgtApi(this.queryData)
        this.$message.success('添加成功')
      }
      this.closeDialog()
      this.$emit('updata')
    },
    // 点击编辑数据回显
    async getAdvImgDetail(id) {
      this.showDialog = true
      const { data: res } = await getAdvImgDetailApi(id)
      this.queryData = res
      this.$refs.uploadImg.fileList = [{
        url: 'http://124.223.14.236:8060/' + res.advimgsrc,
        realtiveUrl: res.advimgsrc
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.disabled {
 display: none
}
</style>
